import { Animated, Linking, Pressable, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';

import { t } from 'i18next';
import LottieView from 'lottie-react-native';

import { useSubscriptionContext } from '../context/SubscriptionContext';
import { SubscriptionAgreementUrl, VipAgreementUrl } from '@/api';
import { CustomerText } from '@/components/CustomerText/customerText';
import usePress from '@/hooks/usePress';
import { Colors } from '@/utils/colors';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

interface BottomBtnProps {
  title?: string;
  style?: StyleProp<ViewStyle>;
}

export const BottomBtn = ({ title, style }: BottomBtnProps) => {
  const { isSubscribing, handleClickSubscribe } = useSubscriptionContext();
  const { handlePressIn, handlePressOut, scaleValue } = usePress();

  return (
    <>
      <View>
        <Pressable
          style={styles.create_button_wrapper}
          onPressIn={handlePressIn}
          onPressOut={handlePressOut}
          onPress={handleClickSubscribe}
        >
          <Animated.View
            style={{
              transform: [{ scale: scaleValue }],
            }}
          >
            <View style={[styles.create_button, style]}>
              {isSubscribing ? (
                <LottieView
                  // source={require('@assets/animation/subscription_loading.json')}
                  style={styles.animation}
                  autoPlay
                  loop
                />
              ) : (
                <Text style={styles.create_button_text}>
                  {t('subscriptionFour.unlock.now')}
                  <CustomerText style={styles.fees_text}>subscription.bottom.fees</CustomerText>
                </Text>
              )}
            </View>
          </Animated.View>
        </Pressable>
        <View style={styles.bottom_content}>
          <CustomerText
            style={styles.server_agent_link}
            onPress={() => {
              Linking.openURL(VipAgreementUrl);
            }}
          >
            subscriptionFour.Membership.Service
          </CustomerText>
          <CustomerText
            style={styles.server_agent_link}
            onPress={() => {
              Linking.openURL(SubscriptionAgreementUrl);
            }}
          >
            subscriptionFour.Automatic.Renewal
          </CustomerText>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  create_button_wrapper: {
    marginTop: pxToVh(26),
    display: 'flex',
    justifyContent: 'center',
    marginHorizontal: pxToVw(20),
  },
  create_button: {
    width: '100%',
    height: pxToVh(50),
    borderRadius: pxToVw(25),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 1)',
  },
  create_button_text: {
    fontSize: pxToVw(17),
    fontWeight: '500',
    color: 'white',
    textAlign: 'center',
  },
  animation: {
    width: '100%',
    height: pxToVh(25),
  },
  server_agent_link: {
    fontSize: pxToVw(11),
    color: 'rgba(0, 0, 0, 0.3)',
  },
  bottom_content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: pxToVh(16),
    paddingHorizontal: pxToVw(20),
  },
  fees_text: {
    fontWeight: '400',
    fontSize: pxToVw(10),
    color: Colors.whiteColor,
  },
});
